@import '../../../../../common/_utils/style/mixins/mixins.scss';
@import '../../../../../common/_utils/style/theme/theme.scss';
@import '../../../../../common/collapse-card/style/collapse-card.scss';
@import '../../../../../common/card/style/card.scss';
@import '../../../../../common/collapse/style/collapse.scss';

@include b(layer-list) {
  $layer-list-prefix: &;
  $collapse-prefix: #{$ant-prefix}-collapse;

  z-index: 10;
  @include e(content) {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    .#{$collapse-prefix} {
      background: transparent;
      border-radius: 0;
      color: inherit;
    }
  }
  @include e(a-card) {
    padding-top: 4px;
    border-radius: 4px;
    background: transparent;
    > div {
      padding: 0;
    }
  }

  @include e(collapse) {
    &.#{$collapse-prefix} {
      > .#{$collapse-prefix}-item {
        border-bottom: none;
        .#{$iconfont-class-prefix}-solid-triangle-right {
          display: inline-block;
        }
        .#{$iconfont-class-prefix}-solid-triangle-down {
          display: none;
        }
        &.#{$collapse-prefix}-item-active {
          .#{$iconfont-class-prefix}-solid-triangle-right {
            display: none;
          }
          .#{$iconfont-class-prefix}-solid-triangle-down {
            display: inline-block;
          }
        }
        > .#{$collapse-prefix}-header {
          color: inherit;
        }
        .#{$collapse-prefix}-content {
          max-height: 400px;
          overflow-y: auto;
          background-color: $collapse-card-secondary-bg;
          margin: 0 -16px;
          padding: 0 16px 0 8px;
        }
        .#{$collapse-prefix}-content-box {
          padding-bottom: 4px;
          padding-right: 0;
        }
      }
    }
    .#{$collapse-prefix}-header,
    #{$layer-list-prefix}__elcarditem {
      padding: 6px 0 !important;
      border-bottom: 1px solid $border-color-split;
    }
    &:last-child {
      .#{$collapse-prefix}-header,
      #{$layer-list-prefix}__elcarditem {
        border-bottom-color: transparent;
      }
    }

    .#{$iconfont-class-prefix}-partially-visible,
    .#{$iconfont-class-prefix}-visible {
      color: $primary-color;
    }
    .#{$iconfont-class-prefix}-hidden {
      color: $disabled-color;
    }
    #{$layer-list-prefix}__sourcelayeritem,
    #{$layer-list-prefix}__elcarditem,
    .header-wrap {
      display: flex;
      align-items: center;
      font-size: 12px;
      line-height: 20px;
      i {
        font-size: 12px;
        cursor: pointer;
        &:first-child {
          margin-right: 9px;
          font-size: 14px;
        }
      }
    }
    #{$layer-list-prefix}__elcarditem {
      justify-content: space-between;
    }
    #{$layer-list-prefix}__layer {
      display: flex;
      width: 100%;
      padding-right: 16px;
    }
    .header-wrap {
      justify-content: space-between;
      .header-text {
        font-size: 0;
        & > i,
        & > span {
          vertical-align: middle;
        }
        & > span {
          max-width: 200px;
          display: inline-block;
          font-size: 12px;
        }
      }
    }
  }
  @include e(sourcelayeritem) {
    padding: 6px 0;
  }
  @include e(disabled) {
    color: $disabled-color !important;
  }
  @include e(layergroupname) {
    max-width: 200px;
  }
  .sm-components-icon-attribute {
    color: $text-color;
  }
  .sm-components-icon-attribute-open {
    color: $primary-5;
  }
}
